<template>
  <div class="apps-box">
    <searchForm
      :label-width="'120px'"
      :data="searchContent"
      @searchForm="getItems"
      @resetForm="clearForm"
    />
    <el-row class="menu-list">
      <el-button type="primary" size="mini" @click="handleAddMenu"
        >添加导航菜单</el-button
      >
      <!-- <el-button type="primary" size="mini" @click="handleAddBtn">添加按钮</el-button> -->
    </el-row>
    <el-editable
      class="apps-list"
      v-loading="appsLoading"
      :data="appsList"
      height="200"
      :columns="navMenuColumns"
    >
      <template slot="default-appLogo" slot-scope="scope">
        <div class="logo-box">
          <icon-font
            class="icon-item"
            :icon="scope.row.appLogo || 'el-icon-setting'"
          />
        </div>
      </template>
      <template slot="default-operation" slot-scope="scope">
        <el-button
          size="small"
          @click.stop="handleEditMenu(scope.row)"
          type="text text-primary"
          >编辑</el-button
        >
        <el-button
          v-if="scope.row.status === 1"
          size="small"
          @click.stop="handleTableUpdateStatus(scope)"
          type="text text-primary"
          >停用</el-button
        >
        <el-button
          v-if="scope.row.status === 2"
          size="small"
          @click.stop="handleTableUpdateStatus(scope)"
          type="text text-primary"
          >启用</el-button
        >
        <el-button
          size="small"
          @click.stop="handleTableRowDel(scope)"
          type="text text-primary"
          >删除</el-button
        >
      </template>
    </el-editable>
    <!-- 添加菜单/添加按钮/编辑菜单/编辑按钮 -->
    <el-dialog
      :title="dialogTitle"
      height="250"
      @close="dialogClose"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-form
        ref="dialogForm"
        v-loading="dialogLoading"
        :model="dialogFormData"
        :rules="formMenuRules"
        label-width="140px"
      >
        <el-form-item
          label="选择菜单"
          prop="id"
          v-if="dialogTitle === '添加按钮' || dialogTitle === '编辑按钮'"
        >
          <el-select
            :loading="appGroupLoading"
            v-model="dialogFormData.mid"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in menuArr"
              :key="index"
              :label="item.resourceName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="resourceName" prop="resourceName">
          <el-input
            placeholder="请输入"
            v-model="dialogFormData.resourceName"
          />
        </el-form-item>
        <el-form-item label="自定义唯一标识码" prop="resourceCode">
          <el-input
            placeholder="请输入"
            v-model="dialogFormData.resourceCode"
          />
        </el-form-item>
        <el-form-item label="icon" prop="resourceIcon">
          <el-input
            placeholder="请输入"
            v-model="dialogFormData.resourceIcon"
          />
        </el-form-item>
        <!-- <el-form-item label="菜单地址" prop="resourcePath">
          <el-input
            placeholder="请输入"
            v-model="dialogFormData.resourcePath"
          />
        </el-form-item> -->
        <el-form-item label="说明" prop="resourceDesc">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="dialogFormData.resourceDesc"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :loading="dialogBtnLoading" type="primary" @click="addMenu"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页插件 -->
    <el-pagination
      align="right"
      style="margin-top: 10px;"
      @size-change="sizeChange"
      @current-change="pageChange"
      :page-sizes="PAGE_NUMBER"
      :page-size="page.size"
      :current-page="page.page"
      :layout="PAGINATION_LAYOUT"
      :total="page.total"
    />
  </div>
</template>
<script>
import {navMenuColumns, formMenuRules, searchContent} from './const'
import ElEditable from '@components/el-editable/door/index.vue'
import searchForm from '@components/search/index.vue'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import {
  resourcePageList,
  resourceUpdateStatusById,
  menuDeleteById,
  resourceSave,
  resourceUpdate
} from '@const/api_staffCenter.js'
import {hasIn} from 'lodash'
import {companyTypeStr} from '@const/common.js'
import paginationMixin from '@mixins/paginationMixin.js'
export default {
  name: 'AppsName',
  mixins: [paginationMixin],
  components: {ElEditable, searchForm},
  data() {
    return {
      dialogTitle: '',
      navMenuColumns,
      searchContent,
      formMenuRules,
      appsList: [],
      appsLoading: false,
      formLoading: false,
      formData: {
        name: '',
        type: '' // 1是内部系统，2是外部系统
      },
      flagUpdate: false, // 修改按钮还是新增
      dialogFormData: {
        resourceType: '',
        resourceCode: '',
        resourceName: '',
        resourceIcon: '',
        resourcePath: '',
        resourceDesc: ''
      },
      dialogVisible: false,
      dialogLoading: false,
      dialogBtnLoading: false,
      menuArr: [],
      appGroupLoading: false,
      resourceName: '',
      // 分页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT // 页码功能布局
    }
  },
  watch: {
    dialogVisible(flag) {
      if (flag) {
        this.dialogFormData.companyTypeArr = Object.keys(companyTypeStr).map(
          item => {
            return {label: companyTypeStr[item], value: item}
          }
        )
      }
    }
  },
  mounted() {
    this.getItems(undefined)
  },
  methods: {
    async getItems(data, resourceType) {
      this.appsLoading = true
      let resourceName =
        data === undefined
          ? ''
          : data.resourceName === null
          ? ''
          : data.resourceName
      let status =
        data === undefined ? '' : data.status === null ? '' : data.status
      resourceType = resourceType === undefined ? '' : resourceType
      await this.$axios({
        url: `${resourcePageList}?page=${this.page.page}&pageSize=${this.page.size}&resourceName=${resourceName}&status=${status}&resourceType=3`,
        method: 'get'
      })
        .then(res => {
          let obj = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          if (resourceType !== 1) {
            this.appsList = obj.content || []
            this.page.total = obj.totalElements || 0
          } else {
            obj.content.forEach(item => {
              let curItem = {
                id: item.id,
                resourceName: item.resourceName
              }
              this.menuArr.push(curItem)
            })
          }
        })
        .finally(() => {
          this.appsLoading = false
        })
    },
    clearForm() {
      this.formData = {name: '', type: ''}
    },
    // 弹出层赋值
    pushData(row) {
      this.dialogFormData = {
        mid: row.id,
        companyType: row.companyType,
        groupCode: row.groupCode,
        appCode: row.appCode,
        appName: row.appName,
        appLogo: row.appLogo,
        domain: row.domain,
        appType: row.appType,
        appDesc: row.appDesc
      }
    },
    // 添加菜单
    handleAddMenu() {
      this.dialogTitle = '添加菜单'
      this.resourceName = '菜单名称'
      this.dialogVisible = true
      this.flagUpdate = false
      this.dialogFormData = {}
    },
    // 添加按钮
    handleAddBtn(scope) {
      this.dialogTitle = '添加按钮'
      this.resourceName = '按钮名称'
      this.dialogVisible = true
      this.dialogFormData = {}
    },
    // 编辑按钮
    handleEditMenu(row) {
      this.dialogTitle = row.resourceType === 2 ? '编辑按钮' : '编辑菜单'
      this.resourceName = row.resourceType === 2 ? '按钮名称' : '菜单名称'
      this.dialogVisible = true
      this.flagUpdate = true
      if (row.resourceType === 2) {
        row.mid = row.parentId
      }
      this.dialogFormData = row
    },
    // 停用按钮
    handleTableUpdateStatus(scope) {
      let status = ''
      let tip = ''
      if (scope.row.status === 1) {
        status = 2
        tip = '此操作将停用该菜单, 是否继续'
      } else if (scope.row.status === 2) {
        status = 1
        tip = '此操作将启用该菜单, 是否继续'
      }
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.appsLoading = true
        this.$axios({
          url: resourceUpdateStatusById,
          method: 'POST',
          data: {
            id: scope.row.id,
            status: status
          }
        })
          .then(res => {
            this.getItems()
          })
          .finally(() => {
            this.appsLoading = false
          })
      })
    },
    // 删除按钮
    handleTableRowDel(scope) {
      this.$confirm('此操作将删除改菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.appsLoading = true
        this.$axios({
          url: menuDeleteById,
          method: 'POST',
          data: {
            id: scope.row.id
          }
        })
          .then(res => {
            this.getItems()
          })
          .finally(() => {
            this.appsLoading = false
          })
      })
    },
    // 添加菜单/按钮
    addMenu() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.dialogBtnLoading = true
          let resourceType = ''
          let parentId = ''
          if (
            this.dialogTitle === '添加菜单' ||
            this.dialogTitle === '编辑菜单'
          ) {
            resourceType = 1
          } else {
            resourceType = 2
            parentId = this.dialogFormData.mid
          }
          let obj = {
            resourceCode: this.dialogFormData.resourceCode,
            resourceName: this.dialogFormData.resourceName,
            resourceDesc: this.dialogFormData.resourceDesc,
            resourceType: 3,
            resourceIcon: this.dialogFormData.resourceIcon,
            resourcePath: this.dialogFormData.resourcePath,
            parentId: parentId
          }
          this.flagUpdate && (obj.id = this.dialogFormData.id)
          this.$axios({
            method: 'post',
            url: this.flagUpdate ? resourceUpdate : resourceSave,
            data: obj
          })
            .then(res => {
              this.getItems()
            })
            .finally(() => {
              this.dialogVisible = false
              this.dialogBtnLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 弹出层关闭触发操作
    dialogClose() {
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.apps-box {
  display: flex;
  flex-direction: column;
  .menu-list {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
  }
  .apps-list {
    flex: 1;

    .logo-box {
      height: 60px;

      .icon-item {
        font-size: 50px;
        line-height: 60px;
      }
    }
  }
}
</style>
